<template>
    <form-layout>
        <el-form
            ref="formRef"
            :model="info.formData"
            :rules="rules"
            label-width="100px"
        >
            <el-form-item label="用户账号" prop="userName">
                <el-input v-model="info.formData.userName" disabled style="width: 300px;"></el-input>
            </el-form-item>
            <el-form-item label="用户昵称" prop="nickName">
                <el-input v-model="info.formData.nickName" style="width: 300px;"></el-input>
            </el-form-item>
            <el-form-item label="手机号码" prop="mobile">
                <el-input v-model="info.formData.mobile" style="width: 300px;"></el-input>
            </el-form-item>
        </el-form>

        <div>
            <el-button type="primary" @click="handleConfirm">确定</el-button>
            <el-button @click="close">取消</el-button>
        </div>
    </form-layout>
    
</template>

<script lang="ts" setup>
    import {reactive,ref} from 'vue'
    import {ElForm} from 'element-plus'
    import useBaseInfoStore from '@/store/baseInfo'
    import useCurrentInstance from '@/hooks/useCurrentInstance'
    import {publicInterface} from '@/types/public'

    interface formDataInterface {
        userName: string,
        nickName: string,
        mobile: string,
        [key: string]: string
    }

    

    let baseInfoStore = useBaseInfoStore()
    const formRef = ref<InstanceType<typeof ElForm>>()
    const {proxy:vm} = useCurrentInstance()

    let info:{formData: formDataInterface} = reactive({
        formData: {
            userName: '',
            nickName: '',
            mobile: ''
        }
    })

    vm.$http.post(vm.$api.public.currentDetail).then((resp: {data: publicInterface}) => {
        if(resp.data.code === 200){
            info.formData = resp.data.data as formDataInterface
        }
    })

    const rules = reactive({
        userName: [
            {required: true,message: '请输入用户账号', trigger: 'blur'}
        ],
        nickName: [
            {required: true,message: '请输入用户昵称', trigger: 'blur'}
        ],
        mobile: [
            {required: true,message: '请输入手机号码', trigger: 'blur'}
        ]
    })

    const handleConfirm = () => {
        formRef.value?.validate(async (valid) => {
            if(!valid) return;

            const resp = await vm.$http.post(vm.$api.public.updateInfo,info.formData)

            if(resp.data.code !== 200){
                vm.$message.error(resp.data.msg);
            }else{
                vm.$message.success(resp.data.msg)
                sessionStorage.setItem('userInfo',JSON.stringify(resp.data.data))
                baseInfoStore.userInfo = resp.data.data
            }
        })
    }

</script>


<style scoped>

</style>